import React, { useEffect, useState } from 'react';
import { Graph, Shape, Node } from '@antv/x6';
import { Button } from 'antd';
export default function index() {
  const [graph, setGraph] = useState<Graph | null>(null);
  const [show, setShow] = useState<Boolean>(false);

  useEffect(() => {
    markgraph();
  }, []);

  // 自定义文本节点
  const addTextnode = () => {
    const textBlock: Node = new Shape.TextBlock({
      shape: 'text-block', // 使用 text-block 渲染 https://x6.antv.vision/zh/examples/node/native-node#text-block
      text: `There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.`,
      attrs: {
        label: {
          contenteditable: 'true', //内容可以编辑状态
        },
        body: {
          fill: '#efdbff',
          stroke: '#9254de',
          rx: 4,
          ry: 4,
        },
      },
      x: 300, // Number，必选，节点位置的 x 值
      y: 40, // Number，必选，节点位置的 y 值
      width: 360, // Number，可选，节点大小的 width 值
      height: 120, // Number，可选，节点大小的 height
    });
    (graph as Graph).addNode(textBlock);
  };

  const test07 = () => {
    const metadata: Node.Metadata = {
      x: 300,
      y: 200,
      width: 200,
      height: 60,
      attrs: {
        // 指定 text 元素的样式
        label: {
          text: 'rect', // 文字
          fill: 'blue', // 文字颜色
        },
      },
      data: {
        userId: 1,
        roleId: 1,
      },
    };
    (graph as Graph).addNode(metadata);
  };

  //生成画布
  const markgraph = () => {
    if (show) {
      console.log('未生成画布，无需重复创建');
      return;
    }
    //创建画布
    const graph = new Graph({
      container: document.getElementById('container') as HTMLElement,
      height: 600,
      background: {
        color: '#fffbe6', // 设置画布背景颜色
      },
      grid: {
        size: 10, // 网格大小 10px
        visible: true, // 渲染网格背景
      },
      panning: {
        enabled: true,
        modifiers: 'shift', //按住shift键并点击鼠标才能触发画布拖拽
      },
      //点击或者套索框选节点
      selecting: {
        enabled: true,
        rubberband: true, // 启用框选
      },
    });
    //数据渲染
    // (graph as Graph).fromJSON(data);
    setGraph(graph);
    setShow(true);

    graph.on('cell:click', ({ cell }) => {
      console.log('cell', cell);
      console.log('cell.getAttrs()', cell.getAttrs());
      console.log('cell.getData()', cell.getData());
      let curCel = cell;
      //节点边框样式修改
      curCel?.attr('body/stroke', 'red');
      //节点文本内容修改
      curCel?.attr('label/text', 'hahhhhhhhahhhha');
    });
  };
  //画布：toJSON
  const test08 = () => {
    console.log((graph as Graph).toJSON());
  };

  return (
    <div>
      <div>
        <Button onClick={addTextnode}>自定义文本节点</Button>
        <Button onClick={test07}>通过控制面板修改属性</Button>
        <Button onClick={test08}>toJSON</Button>
      </div>
      <div id="container"></div>
    </div>
  );
}
